<template>
    <div>
        <div id="container"></div>

        <div class="logo">
            <div class="customer">
                <van-icon name="service-o" />
            </div>
            <div class="customer">
                <van-icon name="aim" />
            </div>
            <div class="customer">
                <van-icon name="question-o" />
            </div>
        </div>
        <div class="scan">
            <p>扫码充电</p>
        </div>
        <!-- 客服电话logo -->
        <div class="personnel" @click="open_phone" style="z-index: 9999">
            <van-icon name="user-circle-o" />
        </div>
        <!-- 电话 -->
        <div class="phone" v-show="showing">
            <div @click="close_phone">X</div>
        </div>
        <!-- 广告 -->
        <div class="advertisement" v-show="show">
            <div @click="close">X</div>
        </div>
        <div class="title_wrap">
            <van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />
        </div>
    </div>
</template>

<script>
import { Dialog } from "vant";
import { mapInit } from "@/utils/map";
import TMap from "TMap";
import { getAdvert } from "@/api/advert";
import { getChargingLocation } from "@/api/charging";

export default {
    data() {
        return {
            show: false,
            showing: false,
            markerList: [], // 标记列表
            advertObj: {}, // 广告
        };
    },
    async created() {
        // 获取广告
        const advertData = await this.advert();
        if (advertData.data.code === 200) {
            this.advertObj = advertData.data.data;
        }

        const chargingLocationData = await this.chargingLocation();
        if (chargingLocationData.data.code === 200) {
						console.log(chargingLocationData);
            this.markerList = chargingLocationData.data.data.map((item) => {
                return {
                    ...item,
                    id: item._id, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                    styleId: "myStyle", //指定样式id
                    position: new TMap.LatLng(item.latitude, item.longitude), //点标记坐标位置
                    content: item.available_quantity,
                    properties: {
                        //自定义属性
                        title: "marker1",
                    },
                };
            });
            this.$nextTick(() => {
                // 初始化地图
                mapInit(this.markerList);
            });
        }
    },
    methods: {
        //点击关闭电话
        close_phone() {
            this.showing = false;
        },
        //点击关闭广告哦
        close() {
            this.show = false;
            Dialog.alert({
                title: "标题",
                message: "你有未完成的订单",
                confirmButtonText: "去看看",
            }).then(() => {
                // on close
            });
        },
        open_phone() {
            this.showing = true;
        },
        // 广告
        advert() {
            return getAdvert();
        },
        // 站点标记
        chargingLocation() {
            return getChargingLocation();
        },
				open_info(id) {
					console.log(id);
				}
    },
};
</script>

<style lang="sass" scoped>
#container
	width: 100%
	height: calc(100vh - 96px)
	position: relative
.logo
	position: absolute
	width: 1rem
	height: 3.5rem
	z-index: 999
	bottom: 2rem
	left: 0.2rem
	.customer
		margin-top: 0.15rem
		width: .9rem
		height: .9rem
		border: 1px solid #ccc
		border-radius: 50%
		text-align: center
		line-height: .9rem
		font-size: 0.5rem
		display: flex
		align-items: center
		justify-content: center
		background: #fff
.scan
	position: absolute
	z-index: 999
	width: 1.5rem
	height: 1.5rem
	background: #4f4f4f
	bottom: 1.5rem
	border-radius: 50%
	color: #fff
	text-align: center
	font-size: .20rem
	line-height: 1.5rem
	left: 50%
	margin-left: -.75rem

.personnel
	position: absolute
	bottom: 2rem
	z-index: 999
	width: 1rem
	height: 1rem
	right: 0.3rem
	border-radius: 50%
	font-size: 0.6rem
	background: #fff
	text-align: center
	line-height: 1.2rem
.advertisement
	width: 5rem
	height: 3rem
	background: #fff
	position: absolute
	top: 50%
	margin-top: -1.5rem
	left: 50%
	margin-left: -2.5rem
	z-index: 99999
	div
		position: absolute
		right: 0
		width: .6rem
		height: .6rem
		line-height: .6rem
		border-radius: 50%
		border: 1px solid #ccc
		text-align: center
.title_wrap
	position: absolute
	width: 7.5rem
	top: .92rem
	z-index: 9999
.phone
	width: 5rem
	height: 3rem
	background: #fff
	position: absolute
	top: 50%
	margin-top: -1.5rem
	left: 50%
	margin-left: -2.5rem
	z-index: 99999
	div
		position: absolute
		right: 0
		width: .6rem
		height: .6rem
		line-height: .6rem
		border-radius: 50%
		border: 1px solid #ccc
		text-align: center
</style>

<style>
.open_zd_xq {
	display: block;
	color: blue;
	font-size: .14rem;
}
</style>
